<template>
  <div class="case-info">
    <h3 class="api-title"> 用例信息</h3>
    <el-form ref="caseForm" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="用例编号：">
            <span>{{caseForm.id}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="用例名称：">
            <span>{{caseForm.name}}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="优先级别：">
            <el-tag size="medium" type="success">{{caseForm.priority}}</el-tag>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="标签：">
            <el-tag size="medium">{{caseForm.tag}}</el-tag>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="添加人员：">
            <label>{{caseForm.createUserName}}</label>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="添加时间：">
            <label>{{caseForm.updateTime}}</label>
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <h3 class="api-title"> 用例步骤（{{caseStepList.count}}）</h3>
    <div class="api-info-request">
      <div style="float:right;margin-bottom:5px">
        <el-button type="primary" size=small @click="executeCases('','',caseForm.id,'','')"><i class="el-icon-caret-right"></i>一键执行</el-button>

        <router-link :to="{path:'/AiTestingInterface-case/caseManager'}">
          <el-button type="warning" size=small><i class="el-icon-arrow-left"></i>返回列表</el-button>
        </router-link>

      </div>

      <div>
        <el-table :data="caseStepList.list" border style="width: 100%" ref="caseTable" highlight-current-row :stripe="true" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
          <el-table-column prop="id" label="编号" fixed min-width="80">
          </el-table-column>
          <el-table-column prop="name" label="用例名" min-width="180">
          </el-table-column>
          <el-table-column prop="address" label="开关" min-width="180">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.caseStatus" active-text="开" inactive-text="关">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="请求参数" min-width="250">
            <template slot-scope="scope">
              <pre v-html="syntaxHighlightCase(scope.row.requestBody)"></pre>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="预期结果" min-width="250">
            <template slot-scope="scope">
              <pre v-html="syntaxHighlightCase(scope.row.assertion)"></pre>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="前置处理" min-width="250">
            <template slot-scope="scope">
              <pre v-html="syntaxHighlightCase(scope.row.preProcessing)"></pre>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="后置处理" min-width="250">
            <template slot-scope="scope">
              <pre v-html="syntaxHighlightCase(scope.row.postProcessing)"></pre>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="header" min-width="250">
            <template slot-scope="scope">
              <pre v-html="syntaxHighlightCase(scope.row.requestHeader)"></pre>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="添加时间" min-width="180">
          </el-table-column>
          <el-table-column prop="updateTime" label="更新时间" min-width="180">
          </el-table-column>
          <el-table-column prop="address" label="操作" fixed='right' min-width="120">
            <template slot-scope="scope">
              <el-button type="text" class="case-manager-button" @click="editCase(scope.row.id)">修改</el-button>
              <el-button type="text" class="case-manager-button" @click="deleteApiCase(scope.row.id)" style="color: red">删除</el-button>
              <el-button type="text" class="case-manager-button" @click="executeCases('','','',scope.row.id,'')" style="color:#1890ff;margin-left:0px">执行</el-button>
              <el-button type="text" class="case-manager-button" style="color: #a213bb">

              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

  </div>
</template>

<script>
import { syntaxHighlight } from '@/utils/apiUtil'
import { isEmpty } from '@/utils/baseUtil'
export default {
  data () {
    return {

      caseForm: {},

      caseStepList: {
        list: [],
        count: 0,
        params: {}
      },

    }
  },

  components: {

  },

  methods: {

    //获取业务用例信息
    getCase (caseId) {
      this.$http({
        url: this.$http.adornUrl('/aitesting/testCase/getByApiId'),
        method: 'get',
        params: {
          id: caseId,
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.caseForm = data.data
          //保存接口信息
          this.$store.commit("api/updateCaseInfoForm", JSON.parse(JSON.stringify(this.caseForm)))
        } else {
          this.$message({
            message: data.msg,
            type: 'warning'
          });
        }
      })
    },

    //获取用例下步骤
    getCaseStep (caseId) {
      this.$http({
        url: this.$http.adornUrl('/aitesting/testCase/getByTestCaseId'),
        method: 'get',
        params: {
          params: JSON.parse({ testCaseId: caseId }),
        }
      }).then(({ data }) => {
        if (data.code == 0) {
          this.caseStepList.list = data.page.list
          this.caseStepList.count = data.page.totalCount
        } else {
          this.$message({ message: data.msg, type: 'warning' });
        }

      })
    },

    //删除用例
    deleteApiCase (id) {
      this.$confirm('此操作将永久删除该用例, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/aitesting/apiTestCase/delete/byId'),
          method: 'delete',
          params: {
            apiTestCaseId: id,
          }
        }).then(({ data }) => {
          if (data.code == 0) {
            this.$message({ type: 'success', message: '删除成功!' });
            this.getApiCase(this.caseForm.id)
          } else {
            this.$message({ message: data.msg, type: 'warning' });
          }
        })
      }).catch(() => {
      });
    },

    //点击编辑用例
    editCaseStep (caseId) {
      this.$emit("editCaseStep", caseId)
    },

    //执行用例
    executeCases (projectId, groupId, interfaceId, testCaseId, keyword) {
      this.$http({
        url: this.$http.adornUrl('/aitesting/apiTestCase/runTestCase'),
        method: 'get',
        params: {
          projectId: projectId,
          groupId: groupId,
          interfaceId: interfaceId,
          testCaseId: testCaseId,
          keyword: keyword,
        }
      }).then(({ data }) => {
        this.$message({
          type: 'success',
          message: data.msg,
        });
        console.log(data)

      })

    },


    //高亮字符串
    syntaxHighlightCase (jsonString) {
      try {
        let obj = JSON.parse(jsonString);
        return syntaxHighlight(JSON.stringify(obj, undefined, 2));
        // return JSON.stringify(obj, null, 2);
      } catch (ex) {
        return jsonString;
      }
    }


  },

  created () {
    let caseId = this.$route.query.case_id;
    this.getCase(caseId)
    this.getCaseStep(caseId)
  },


}
</script>

<style scoped>
.case-info >>> pre {
  height: 90px;
  font-size: 12px;
  padding: 1px;
}
</style>